<template>
  <div class="about-dialog">
    <el-dialog
      :title="dialogTitle"
      @close="close"
      :visible="visible"
      center
      :lock-scroll="true"
    >
      <el-transfer
        filterable
        v-model="value"
        :props="{...typeProps}"
        :data="data"
        v-loading="chooseLoading"
      >
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: ["dialogTitle", "visible", "typeProps", 'data', 'chooseValue', 'chooseLoading'],
  data () {
    return {
      value: [],
      // data: [
      //   {
      //     key:1,
      //     label: '北京'
      //   },
      //   {
      //     key: 2,
      //     label: '上海'
      //   }
      // ]
    }
  },
  computed: {},
  watch: {
    typeProps(val) {
      console.log(val)
    },
    chooseValue(val) {
      console.log('我', val)
      val.forEach(item => {
        this.value.push(item.data_id)
      })
    }
  },
  created () {},
  mounted () {
    console.log(this.props)
  },
  methods: {
    close() {
      this.$emit('close');
    },
    submit() {
      this.$emit('getChooseData', this.value)
      this.close()
    }
  }
}
</script>

<style scoped lang="less">
:deep(.el-transfer) {
  // text-align: center;
}
</style>
